<template>
	<coreshop-page :title="`我的${shopConfigStore?.config?.pointShowName}`" mode="left">
		<view class="layout-integral-box">
			<view class="integral-box">
				<view class="title">可用{{ shopConfigStore?.config?.pointShowName }}</view>
				<view class="integral">{{state.list[0]?.balance || 0}}</view>
			</view>
			<view class="integral-list-box" v-if="state.list.length > 0">
				<template v-for="item in state.list" :key="item.id">
					<view class="item-box">
						<view class="title-box">
							<view class="name">{{ item.typeName }}</view>
							<view class="num">{{ item.num > 0 ? '+' : '' }} {{ item.num }}</view>
						</view>
						<view class="time-box">
							<view>{{ item.remarks.replace(/积分/, shopConfigStore?.config?.pointShowName) }}</view>
							<view class="time">{{ item.createTime }}</view>
						</view>
					</view>
				</template>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.data" text="暂无记录"></coreshop-empty>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, onMounted } from 'vue';
	import { useShopConfigStore } from '@/core/store';
	import type { ShopConfigStoreType, Response } from '@/core/models';
	import { queryUserPointLog } from '@/core/api';
	import { EmptyEnum } from '@/core/enum';
	import { onReachBottom } from '@dcloudio/uni-app';

	// 获取项目配置
	const shopConfigStore : ShopConfigStoreType = useShopConfigStore();

	const state = reactive<{
		list : Array<any>;
		totalPages : number;
		page : number;
		limit : number;
	}>({
		list: [],
		totalPages: 1,
		page: 1,
		limit: 10,
	})

	onMounted(() => {
		/** 获取积分列表 */
		getUserPointLog()
	});

	/** 获取积分列表 */
	const getUserPointLog = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		const userPointLog : Response<Array<any>> = await queryUserPointLog({
			page: state.page,
			limit: state.limit,
		})
		state.totalPages = userPointLog?.otherData?.totalPages;
		state.list = state.list.concat(userPointLog?.data);
		uni.hideLoading();
	}

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getUserPointLog();
		}
	})
</script>
<style lang="scss" scoped>
	@import './integral.scss';
</style>